<template>
	<view :data-theme="theme">
		<view class="nav">
			<uni-nav-bar title="商品评价" leftIcon="back" @clickLeft="$tab.back()" :statusBar="true" fixed="false"
				:border="false"></uni-nav-bar>
		</view>
		<view :style="{
			height: occupyHeiht + 'px'
		}">

		</view>
		<view class="bg-FFF">
			<form @submit="formSubmit" report-submit='true'>
				<view class='evaluate-con borderPad'>
					<view class='score borRadius14'>
						<view class='item acea-row row-middle' v-for="(item, indexw) in scoreList" :key="indexw">
							<view>{{ item.name }}</view>
							<view class='starsList'>
								<uni-icons size="30" @click="stars(indexn, indexw)"
									v-for="(itemn, indexn) in item.stars" :key="indexn"
									:type="item.index >= indexn ? 'star-filled' : 'star'"
									:class="item.index >= indexn ? 'icon-shitixing' : 'icon-kongxinxing'"></uni-icons>
							</view>
							<text class='evaluate'>{{ item.index === -1 ? "" : item.index + 1 + "分" }}</text>
						</view>
						<view class='textarea'>
							<textarea placeholder='商品满足你的期待么？说说你的想法，分享给想买的他们吧~' name="comment"
								placeholder-class='placeholder'></textarea>
							<view class='list acea-row row-middle'>
								<view class='pictrue' v-for="(item, index) in picsPath" :key="index">
									<image :src='item'></image>
									<text class='iconfont icon-guanbi1' @click='DelPic(index)'></text>
								</view>
								<htz-image-upload v-model="pics" uploadText='评论图片' :headers="headers" :action="action"
									@uploadSuccess="uploadFiles" :max="3"></htz-image-upload>
							</view>
						</view>
						<button class='evaluateBnt bg_color' formType="submit">立即评价</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
import {
	getToken
} from "@/utils/auth.js"
import { Debounce } from '@/utils/validate.js'
var thro;
let app = getApp();
export default {
	data() {
		return {
			pics: [],
			picsPath: [],
			scoreList: [{
				name: "商品质量",
				stars: ["", "", "", "", ""],
				index: -1
			},
			{
				name: "服务态度",
				stars: ["", "", "", "", ""],
				index: -1
			}
			],
			headers: {
				'Authorization': 'Bearer ' + getToken()
			},
			action: getApp().globalData.config.baseUrl + '/common/upload',
			uploadList: [],
			orderId: '',//订单编号
			orderSpuId: '',
			evaluateId: 0, //订单id
			unique: '',
			occupyHeiht: 0,
			cart_num: 0,
			theme: app.globalData.theme,
		};
	},
	onLoad(options) {
		thro = this;
		this.orderId = options.orderId || 0;
		this.orderSpuId = options.orderSpuId || 0;
		this.evaluateId = Number(options.id) || 0;

	},
	onReady() {
		let view = uni.createSelectorQuery().in(this).select(".nav");
		view.fields({
			size: true,
			scrollOffset: true
		}, data => {
			console.log("🚀🚀🚀 ~ onReady ~ data:", data)
			thro.occupyHeiht = data.height
		}).exec();
	},
	methods: {
		uploadFiles(e) {
			let data = JSON.parse(e.data)
			this.pics.push(data.url)
			console.log("🚀🚀🚀 ~ uploadFiles ~ this.pics:", this.pics)
		},
		stars: function (indexn, indexw) {
			this.scoreList[indexw].index = indexn;
		},
		/**
		 * 删除图片
		 *
		 */
		DelPic: function (index) {
			let that = this,
				pic = this.picsPath[index];
			that.picsPath.splice(index, 1);
			that.pics.splice(index, 1);
		},

		/**
		 * 上传文件
		 *
		 */
		uploadpic: function () {
			let that = this;
			that.$util.uploadImageOne({
				url: 'upload/image',
				name: 'multipart',
				model: "product",
				pid: 1
			}, function (res) {
				that.pics.push(res);
				that.picsPath.push(res);
				that.$set(that, 'pics', that.pics);
				that.$set(that, 'picsPath', that.picsPath);
			});
		},

		/**
		 * 立即评价
		 */
		formSubmit: Debounce(function (e) {
			let formId = e.detail.formId,
				value = e.detail.value,
				that = this,
				product_score = that.scoreList[0].index + 1 === 0 ? "" : that.scoreList[0].index + 1;
			// if (!value.comment) return that.$util.Tips({
			// 	title: this.$t(`page.users.goodsCommentCon.tipsWrite`)
			// });
			value.star = product_score;
			value.pics = that.pics;
			value.orderSpuId = JSON.parse(that.orderSpuId);
			value.orderId = JSON.parse(that.orderId);
			uni.showLoading({
				title: "正在发布评论……"
			});
			this.$Api.index.orderComment(value).then(res => {
				uni.hideLoading();
				this.$modal.msg('感谢您的评价!')
				uni.switchTab({
					url: '/pages/personalCenter'
				})
			}).catch(err => {
				uni.hideLoading();
				// return this.$modal.msg(err.tit)
			});
		})
	}
}
</script>

<style lang="scss" scoped>
.nav {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
}

.font_sm {
	font-size: 24rpx;
	color: #999;
	padding-top: 10rpx;
}

.icon-shitixing {
	color: #FFBB00 !important;
}

.icon-kongxinxing {
	color: #f5f5f5 !important;
}

.acea-row {
	display: flex;
	align-items: center;
}

.evaluate-con .score {
	background-color: #fff;
	// border-top: 1rpx solid #f5f5f5;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #282828;
	padding: 46rpx 24rpx;
}

.evaluate-con .score .item~.item {
	margin-top: 36rpx;
}

.evaluate-con .score .item .starsList {
	padding: 0 35rpx 0 40rpx;

}

.evaluate-con .score .item .starsList .uni-icons {
	font-size: 40rpx;
	color: #aaa;
}

.evaluate-con .score .item .starsList .iconfont~.iconfont {
	margin-left: 20rpx;
}

.evaluate-con .score .item .evaluate {
	color: #aaa;
	font-size: 24rpx;
}

.evaluate-con .score .textarea {
	width: 100%;
	background-color: #F5F5F5;
	border-radius: 14rpx;
	margin-top: 55rpx;
}

.evaluate-con .score .textarea textarea {
	font-size: 28rpx;
	padding: 38rpx 30rpx 0 30rpx;
	width: 100%;
	box-sizing: border-box;
	height: 160rpx;
	width: auto !important;
}

.evaluate-con .score .textarea .placeholder {
	color: #bbb;
}

.evaluate-con .score .textarea .list {
	margin-top: 25rpx;
	padding-left: 5rpx;
}

.evaluate-con .score .textarea .list .pictrue {
	width: 140rpx;
	height: 140rpx;
	margin: 0 0 35rpx 20rpx;
	position: relative;
	font-size: 22rpx;
	color: #bbb;
	border-radius: 14rpx;
}

.evaluate-con .score .textarea .list .pictrue:nth-last-child(1) {
	border: 1rpx solid #ddd;
	box-sizing: border-box;
}

.evaluate-con .score .textarea .list .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 14rpx;
}

.evaluate-con .score .textarea .list .pictrue .icon-guanbi1 {
	font-size: 45rpx;
	position: absolute;
	top: -20rpx;
	right: -20rpx;
}

.evaluate-con .score .textarea .list .pictrue .icon-icon25201 {
	color: #bfbfbf;
	font-size: 50rpx;
}

.evaluate-con .score .evaluateBnt {
	font-size: 30rpx;
	color: #fff;
	width: 100%;
	height: 86rpx;
	border-radius: 43rpx;
	text-align: center;
	line-height: 86rpx;
	margin-top: 45rpx;
}

.bg_color {
	background: #FFBB00;
}
</style>
